////
/// Components
/// Page
////

@import 'utils/shared/layout';

html {
  @include scroll-lock;
  font-family: get-font-stack();

  ::selection {
    color: white;
    background-color: get-color(coal, dark);
  }
}

body {
  cursor: get-cursor();
  position: relative;
  background-color: white;

  // Better page overscroll... specifically adds color above and below the Sidebar
  @media screen and (min-width: get-breakpoint()) {
    &::before,
    &::after {
      content: '';
      position: sticky;
      left: 0;
      display: block;
      width: get-layout-length(sidebar) - get-spacing(fattest);
      height: 0;
    }

    &::before {
      top: 0;
      box-shadow: 0 -#{get-spacing(fattest)} 0 get-spacing(fattest) get-color(coal, dark);
    }

    &::after {
      bottom: 0;
      box-shadow: 0 get-spacing(fattest) 0 get-spacing(fattest) get-color(coal, dark);
    }
  }
}

///
/// Cursor styles
p,
li,
dd,
.Heading,
.Subheading {
  cursor: get-cursor(text);
}

a,
button {
  cursor: get-cursor(pointer);

  &:active {
    cursor: get-cursor(pointer, active);
  }
}

.draggable--is-dragging {
  &,
  * {
    cursor: get-cursor(drag, active);
  }
}

// Set `state` cursors to never used tags only so they can be fetched on page load,
// rather than the instance they are first requested...
.preload-cursors {
  @include visually-hidden;

  b {
    cursor: get-cursor(drag, active);
  }

  u {
    cursor: get-cursor(pointer, active);
  }

  a {
    cursor: get-cursor(rock, active);
  }
}
